<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html:xhtml />
<script type="text/javascript">
    $(document).ready(function() {
        // Init help dialogs
        $("#helpDialog").dialog({
            autoOpen: false,
            position: "right"
        });
        $("#helpButton").click(function() {
            $("#helpDialog").dialog("open");
        });
        $("#ldPlotDesc").dialog({
            autoOpen: false,
            width: 400,
            position: "right"
        });
        $("#ldPlotHelp").click(function() {
            $("#ldPlotDesc").dialog("open");
        });
        $("#ldPlotLink").click(function() {
            $("#ldPlotDesc").dialog("open");
        });

        // 'DataTablize' the table
        $("#geneTable").dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"sType": "html"},
                {"sType": "numeric" },
                {"bSortable": false, "bSearchable": false}]
        });
    });
</script>
<div id="geneList" class="content list">
    <html:form action="searchSubmit">
        <div class="input">
            <dl>
                <dt>Search Gene:</dt>
                <dd><html:text property="searchText" />&nbsp;<html:submit property="submitType" value="Search" /></dd>
            </dl>
            <html:hidden property="searchSelect" value="2" />
        </div>
    </html:form>
    <h2>
        Gene List <span id="helpButton" class="ui-icon help ui-icon-info">&nbsp;&nbsp;&nbsp;</span>
    </h2>
    <div>
        <table id="geneTable" cellpadding="0" cellspacing="0" border="0" class="display">
            <thead>
                <tr>
                    <th>Gene</th>
                    <th>SNPs Genotyped</th>
                    <th><span id="ldPlotHelp" class="ui-icon help ui-icon-info"></span>LD Plots</th>
                </tr>
            </thead>
            <tbody>
                <logic:iterate id="geneLink" name="geneListForm" property="geneList" type="icapture.beans.DB.GeneLink">
                    <tr>
                        <td>
                            <a href='<html:rewrite page="/geneSummary.do" />?geneName=<bean:write name="geneLink" property="name" />'>
                                <bean:write name="geneLink" property="name" />
                            </a>
                        </td>
                        <td>
                            <bean:write name="geneLink" property="snpCount" />
                        </td>
                        <td>
                            <a onclick="openLdPlot('<bean:write name="geneLink" property="name" />', 'CAPPS', 3);">CAPPS</a> |
                            <a onclick="openLdPlot('<bean:write name="geneLink" property="name" />', 'SAGE', 4);">SAGE</a> |
                            <a onclick="openLdPlot('<bean:write name="geneLink" property="name" />', 'SLSJ', 5);">SLSJ</a> |
                            <a onclick="openLdPlot('<bean:write name="geneLink" property="name" />', 'Busselton', 6);">Busselton</a>
                        </td>
                    </tr>
                </logic:iterate>
            </tbody>
        </table>
    </div>
</div>
<div id="helpDialog" title="Gene List">
    <tiles:insert name="geneListHelp" />
    <p>
        Clicking on a gene takes you to the corresponding SNP List Page for that gene.
    </p>
</div>
<tiles:insert name="ldPlotDesc" />
<tiles:insert name="ldPlotModal" />